<template>
  <basic-container
    page-title="用户域名"
    :sub-title="user?.username || user?.email"
    back
    custom-content
  >
    <template #header>
      <el-tabs v-model="activeTab" class="basic-tabs">
        <el-tab-pane label="域名管理" name="domain"></el-tab-pane>
        <el-tab-pane label="分组管理" name="group"></el-tab-pane>
      </el-tabs>
    </template>

    <template v-if="!loading">
      <domain-table-list
        v-if="activeTab === 'domain'"
        :hide-columns="['user']"
        :user="user"
      ></domain-table-list>

      <domain-group-table-list
        v-if="activeTab === 'group'"
        :user="user"
      ></domain-group-table-list
    ></template>
  </basic-container>
</template>

<script setup lang="ts">
import type { UserModel } from '@/apis/model/user'
import { DomainGroupTableList, DomainTableList } from '@/components/business'

type TabType = 'domain' | 'group'

const route = useRoute()

const activeTab = ref<TabType>('domain')
const user = ref<UserModel>()
const loading = ref(true)

onMounted(() => {
  loading.value = true
  userInfoApi({ id: route.params.id as string })
    .then(res => {
      user.value = res
    })
    .finally(() => {
      loading.value = false
    })
})
</script>

<style scoped lang="scss"></style>
